<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link type="text/css" href="css/base.css">-->
    <style>
        .layout {
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #toolbar {
            display: flex;
            line-height: 16px;
            margin-bottom: 1px;
            border: 1px solid red;
        }

        #toolbar > .buttons {
            display: flex;
            /*flex: 1;*/
            padding: 0 20px;
            align-items: center;
            border: 1px solid red;
        }
        #toolbar >.buttons >  .btn-part-1{
            display: flex;
            border: 1px solid green;
        }

        #toolbar >.buttons >  .btn-part-2{
            display: flex;
            border: 1px solid yellow;
        }
        #toolbar > .preview {
            display: flex;
            padding: 2px 10px;
            border: 1px solid yellow;
        }
        #toolbar > .info {
            display: flex;
            flex: 1;
            padding: 0 20px;
            flex-direction: row-reverse;
            align-items: center;
            border: 1px solid blue;
        }


        /*----------------footer------------------*/
        #status {
            height: 23px;
            display: flex;
            padding: 0 10px;
            border: 1px solid black;
        }
        #status .status {
            line-height: 26px;
            margin-right: 10px
        }
        .placeholder {
            flex: 1;
            text-align: right;
            line-height: 26px
        }
        #status .version {
            color: #fd942b;
            margin-left: 20px;
            line-height: 26px
        }

        /*------- section-------------------------*/
        /*.section{*/
            /*flex: 1;*/
            /*border: 1px solid cornflowerblue;*/
            /*display: flex;*/
            /*background-color: rgb(189, 189, 189);*/
        /*}*/
        .main-dock{
            display: flex;
            flex: 2;
            background-color: rgb(189, 189, 189);
            height: 600px;
        }
        .main-dock > .hierarchy,.res,.prop{
            min-width: 204px;
            min-height: 226px;
            flex: 0.114994 0.114994 0px;
            border: 1px solid black;
        }
        .main-dock > .scene-box{
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .scene{
            flex: 1;
        }
        .resizer-1{
            width: 5px;
            background-color: red;
            height: 100%;
        }
        .resizer-2{
            width: 100%;
            height: 5px;
            background-color: red;
        }

    </style>
</head>
<body class="layout">
<header id="toolbar">
    <!--按钮栏-->
    <div class="buttons">

        <!--按钮1-->
        <div class="btn-part-1">
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
            <button>按钮4</button>
        </div>

         <!--按钮部分2-->
        <div class="btn-part-2">
            <button>按钮5</button>
            <button>按钮6</button>
        </div>
    </div>

    <!--预览栏-->
    <div class="preview">
        <select tabindex="-1" value="browser">
            <option value="simulator">模拟器</option>
            <option value="browser">浏览器</option>
        </select>
        <button>Play</button>
    </div>

    <!--信息栏-->
    <div class="info">
        <button>打开项目文件夹</button>
        <button>按钮1</button>
    </div>
</header>
<!--<div class="main-dock">-->
    <div class="main-dock">
        <div class="hierarchy">
            层级管理器
        </div>
        <div class="resizer-1"></div>
        <div class="res">
            资源管理器
        </div>
        <div class="resizer-1"></div>
        <div class="prop">
            属性检查器
        </div>
        <div class="scene-box">
            <div class="scene">
                场景编辑器
            </div>
            <div class="resizer-2"></div>
            <div class="console-box">
                控制台
            </div>
        </div>
    </div>
<!--</div>-->
<footer id="status">
    <div class="status">
        <label>status_1</label>
        <label>status_2</label>
        <label>status_3</label>
    </div>
    <div class="placeholder"></div>
    <div class="version">CC</div>
</footer>
</body>
</html>
